<template>
  <section class="online-sale">
    <div class="naviga">数据采集&nbsp;>&nbsp;线上销售数据</div>
    <div class="border-r margin-top">
      <div class="title">线上销售数据</div>
      <div class="product-content">
        <i class="el-icon-question blue"></i> 采集<span class="blue">淘宝/天猫、京东</span>平台，
        <span class="blue">{{commentNum | fmoney}} </span>条数据&nbsp;
          <!--<span class="gradient-btn point">-->
                      <!--开通更多渠道-->
          <!--</span>-->
        <span class="right">更新时间： {{today}}</span>
      </div>
    </div>
    <div class="margin-top charts-box">
      <div class="charts clearfix">
        <div class="chart-box">
          <div class="chart chart-bg-1">
            {{topData.totalSalesCount || '暂无数据'}}
          </div>
          <div class="chart-des">月销量（件）</div>
        </div>
        <div class="chart-box">
          <div class="chart chart-bg-2">
            {{topData.totalSalesAmount|| '暂无数据'}}
          </div>
          <div class="chart-des">月销额（万元）</div>
        </div>
        <div class="chart-box">
          <div class="chart chart-bg-3">{{topData.avgSalesPrice|| '暂无数据'}}</div>
          <div class="chart-des">当前均价（元）</div>
        </div>
      </div>
      <div class="charts clearfix">
        <div class="chart-box">
          <div class="chart chart-bg-4">{{topData.shopCount|| '暂无数据'}}</div>
          <div class="chart-des">店铺数（家）</div>
        </div>
        <div class="chart-box">
          <div class="chart chart-bg-5">{{topData.categoryCount|| '暂无数据'}}</div>
          <div class="chart-des">品类数（个）</div>
        </div>
        <div class="chart-box">
          <div class="chart chart-bg-6">{{topData.totalSku|| '暂无数据'}}</div>
          <div class="chart-des"> SKU数</div>
        </div>
      </div>
      <div class="charts clearfix">
        <div class="chart-box">
          <div class="chart chart-bg-7">{{topData.brandCount|| '暂无数据'}}</div>
          <div class="chart-des"> 品牌数（个）</div>
        </div>
        <div class="chart-box">
          <div class="chart chart-bg-8">{{topData.cityCount|| '暂无数据'}}</div>
          <div class="chart-des"> 地区数（个）</div>
        </div>
      </div>
    </div>
    <div class="comment-box border-r margin-top ">
      <el-col :span="24" style="padding-left: 15px;padding-right: 15px">
        <el-form :inline="true" :model="formInline" class="margin-top" style="width: 100%" label-position="right">
          <el-form-item label="品类">
            <el-select v-model="formInline.categoryId" placeholder="品类"  style="width: 100px">
              <el-option label="全部" value="0"></el-option>
              <el-option
                v-for="item in categorySelectData"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渠道">
            <el-select v-model="formInline.channel" placeholder="渠道"  style="width: 100px">
              <el-option label="全部" value="ALL"></el-option>
              <el-option
                v-for="item in entrySelectData"
                :key="item.id"
                :label="item.entry"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区">
            <el-select v-model="formInline.province" placeholder="省份"  style="width: 150px" @change="getCities()">
              <el-option label="全部" value="ALL"></el-option>
              <el-option
                v-for="item in provSelectData"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select v-model="formInline.city" placeholder="城市" style="width: 120px" @change="getShops">
              <el-option label="全部" value="ALL"></el-option>
              <el-option
                v-for="item in citySelectData"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店铺">
            <el-select v-model="formInline.shopId" placeholder="店铺"  style="width: 120px" @change="getBrands">
              <el-option label="全部" value="0"></el-option>
              <el-option
                v-for="item in shopCodeSelectData"
                :key="item.shopId"
                :label="item.shopName"
                :value="item.shopId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌">
            <el-select v-model="formInline.brandId" placeholder="品牌"  style="width: 120px" @change="getProducts">
              <el-option label="全部" value="0"></el-option>
              <el-option
                v-for="item in brandSelectData"
                :key="item.id"
                :label="item.entry"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品型号">
            <el-select v-model="formInline.productId" placeholder="产品型号"  style="width: 120px">
              <el-option label="全部" value="0"></el-option>
              <el-option
                v-for="item in typeSelectData"
                :key="item.brandId"
                :label="item.brandName"
                :value="item.brandId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-table
        :data="tableData"
        @sort-change='changeSort'
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        border
        style="width: 100%;">
        <el-table-column
          label="品类"
          prop="categoryName"
          width="90">
        </el-table-column>
        <el-table-column
          label="渠道"
          prop="channel"
          width="90">
        </el-table-column>
        <el-table-column
          label="省份"
          prop="province"
          width="70">
        </el-table-column>
        <el-table-column
          label="城市"
          prop="city"
          width="70">
        </el-table-column>
        <el-table-column
          label="店铺名"
          prop="shopName"
          width="110">
        </el-table-column>
        <el-table-column
          label="品牌"
          prop="categoryName"
          width="110">
        </el-table-column>
        <el-table-column
          label="型号"
          prop="productCode"
          width="110">
        </el-table-column>
        <el-table-column
          label="月销额（元）"
          sortable="custom"
          prop="salesAmount"
          width="110">
        </el-table-column>
        <el-table-column
          label="当前价格（元）"
          prop="price"
          sortable="custom"
          width="110">
        </el-table-column>
        <el-table-column
          label="月销量（台）"
          sortable="custom"
          prop="salesCount"
          width="110">
        </el-table-column>
        <el-table-column
          prop="sentimentType"
          label="操作"
          fixed="right"
          align="center"
          header-align="center"
          width="80">
          <template slot-scope="scope">
            <span class="point" @click="getDetail(scope.row)">产品信息</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px"
        background
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </section>
</template>
<style lang="less" scoped>
  .online-sale .el-form-item__label {
    font-size: 14px;
    font-weight: normal;
  }
  .clearfix::after {
    content: '\200B';
    display: block;
    height: 0;
    clear: both;
  }

  .clearfix {
    *zoom: 1;
  }

  /*IE/7/6*/
  .blue {
    color: #03a9f3;
  }

  .right {
    float: right;
  }

  .normal {
    font-size: 14px;
  }

  .point {
    cursor: pointer;
  }

  .gradient-btn {
    color: #fff;
    background: linear-gradient(left, #04d6e5, #03a9f3);
    padding: 6px 10px;
    border-radius: 5px;
  }

  .title {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #efefef;
  }

  .product-content {
    height: 60px;
    line-height: 20px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 20px;
  }

  .charts {
    background: #fff;
    margin-left: 15px;
    border-radius: 5px;
    padding: 15px;
  }

  .charts-box {
    margin-right: 15px;
    display: flex;
    justify-content: space-between;
  }

  .chart-box {
    float: left;
    margin: 7px;
  }

  .chart {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    font-size: 18px;
    color:#868686;
    z-index: 1;
    cursor:pointer;

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    border-radius: 50%;
    z-index: -1;
  }
  &:hover{
      transform: scale(1.1);
      color: #000;
   }
  }
  .chart-des{
    margin-top: 10px;
    text-align: center;
  }
  .chart-bg-1 {
    background: linear-gradient(left bottom, #fb9292, #f5da63);
    box-shadow: 0 0 20px #fb9292;
  }

  .chart-bg-2 {
    background: linear-gradient(left bottom, #5bd77b, #d7e770);
    box-shadow: 0 0 20px #5bd77b;
  }

  .chart-bg-3 {
    background: linear-gradient(left bottom, #40c6cf, #4df195);
    box-shadow: 0 0 20px #40c6cf;
  }

  .chart-bg-4 {
    background: linear-gradient(left bottom, #5ed77b, #d7e76f);
    box-shadow: 0 0 20px #5ed77b;
  }

  .chart-bg-5 {
    background: linear-gradient(left bottom, #959be9, #6bb9f3);
    box-shadow: 0 0 20px #959be9;
  }

  .chart-bg-6 {
    background: linear-gradient(left bottom, #44cae4, #5fc0f3);
    box-shadow: 0 0 20px #44cae4;
  }

  .chart-bg-7 {
    background: linear-gradient(left bottom, #949be9, #6bb9f4);
    box-shadow: 0 0 20px #949be9;
  }

  .chart-bg-8 {
    background: linear-gradient(left bottom, #a993dd, #ef88a5);
    box-shadow: 0 0 20px #a993dd;
  }
</style>
<script type="es6">
  export default {
    data() {
      return {
        loading:true,
        commentNum:0,
        today: `1970-01-01 08:00:00`,
        //汇总信息
        topData:{
          "totalSalesCount": 0,
          "totalSalesAmount": 0,
          "avgSalesPrice": 0,
          "shopCount": 0,
          "categoryCount": 0,
          "totalSku": 0,
          "brandCount": 0,
          "cityCount": 0
        } ,
        //品类
        categorySelectData: [],
        //渠道
        entrySelectData:  [],
        //省份
        provSelectData:[],
        //城市
        citySelectData:[],
        //店铺
        shopCodeSelectData: [],
        //品牌
        brandSelectData: [],
        //产品型号
        typeSelectData:[],
        //表格列表
        tableData: [],
        total: 0,
        pSize: 10,
        currentPage: 1,
        formInline:{
          "categoryId":"0",
          "channel":"ALL",
          "province":"ALL",
          "city":"ALL",
          "shopId":"0",
          "brandId":"0",
          "productId":"0",
          "pageNo":1,
          "pageSize":10,
          tableName:'AMOUNT',
          order:'DESC'
        }
      }
    },
    mounted(){
      this.getCommentNum();
      this.getType();
      this.getEntry();
      this.getProvince();
      this.getShops();
      this.getData();
    },
    methods: {
      getData(){
        this.getTop();
        this.getSalesData();
      },
      // 评论总数
      getCommentNum(){
        this.$http.post(this.GLOBAL.host,{
          "method": "getOnlineSalesCount",
          "query": {}
        })
          .then((res) => {
            this.commentNum = res.data.data.total;
            let time = new Date();
            this.today= `${time.getFullYear()}-${this.tranTime(time.getMonth()+1)}-${this.tranTime(time.getDate())} ${time.getHours()}:${this.tranTime(time.getMinutes())}:${this.tranTime(time.getSeconds())}`;
          })
          .catch((error) => {
            this.commentNum = 0;
          });
      },
      // 格式化日期
      tranTime(val){
        if(val < 10){
          return `0${val}`
        }else{
          return `${val}`
        }
      },
      // 获取顶层数据
      getTop(){
        this.$http.post(this.GLOBAL.host,{
          "method": "getOnlineSalesStatistics",
          "query": this.formInline
        })
        .then((res) => {
          this.topData = res.data.data;
        })
        .catch((error) => {
          this.topData =  {
            "totalSalesCount": 0,
              "totalSalesAmount": 0,
              "avgSalesPrice": 0,
              "shopCount": 0,
              "categoryCount": 0,
              "totalSku": 0,
              "brandCount": 0,
              "cityCount": 0
          }
        });
      },
      // 数据采集-线上舆情数据-品类获取
      getType(){
        this.$http.post(this.GLOBAL.host, {
          "method": "getSubCategory",
          "query": {
            "type": 0
          }
        })
          .then((res) => {
            this.categorySelectData = res.data.data
          })
          .catch((error) => {
            this.categorySelectData = [];
          });
      },
      // 数据采集-渠道获取
      getEntry(){
        this.$http.post(this.GLOBAL.host, {
          "method": "getChannel",
          "query": {}
        })
          .then((res) => {
            this.entrySelectData =  res.data.data
          })
          .catch((error) => {
            this.entrySelectData = [];
          });
      },
      // 线上销售数据-获取省份列表
      getProvince(){
        this.$http.post(this.GLOBAL.host,  {
          "method":"getOnlineSalesProvince",
          "query":{
          }
        })
          .then((res) => {
            this.provSelectData = res.data.data;
          })
          .catch((error) => {
            this.provSelectData = [];
          });
      },
      // 获取城市列表接口
      getCities(){
        this.$http.post(this.GLOBAL.host, {
          "method":"getOnlineSalesCity",
          "query":{
            "province":this.formInline.province
          }
        })
          .then((res) => {
            this.citySelectData = res.data.data;
          })
          .catch((error) => {
            this.citySelectData = [];
          });
      },
      // 线上销售数据-店铺列表
      getShops(){
        this.$http.post(this.GLOBAL.host,  {
          "method":"getOnlineSalesShop",
          "query":{
            "channel": this.formInline.channel,
            "province": this.formInline.province,
            "city": this.formInline.city
          }
        })
          .then((res) => {
            this.shopCodeSelectData = res.data.data
          })
          .catch((error) => {
            this.shopCodeSelectData = [];
          });
      },
      // 品牌列表获取
      getBrands(){
        let params = {
          "method":"getOnlineSalesBrand",
          "query":{
            "shopId": this.formInline.shopId
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.brandSelectData = res.data.data;
          })
          .catch((error) => {
            this.brandSelectData = [];
          });
      },
      // 产品型号列表获取
      getProducts(){
        let params = {
          "method":"getOnlineSalesProduct",
          "query":{
            "shopId":this.formInline.shopId,
            "brandId":this.formInline.brandId
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.typeSelectData = res.data.data
          })
          .catch((error) => {
            this.typeSelectData = [];
          });
      },
      // 线上销售数据列表
      getSalesData(){
        this.loading=true;
        this.$http.post(this.GLOBAL.host, {
          "method":"getOnlineSalesData",
          "query":this.formInline
        })
          .then((res) => {
            this.loading=false;
            this.tableData = res.data.data.list;
            this.total=res.data.data.total
          })
          .catch((error) => {
            this.loading=false;
            this.tableData = [];
          });
      },
      //页数
      handleSizeChange(val) {
        this.pSize = val;
        this.formInline.pageSize= val;
        this.getSalesData();
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.formInline.pageNo= val;
        this.getSalesData();
      },
      getDetail(detail){
        this.$router.push('/full/menu/DAQOnlineSaleDatail/'+detail.shopId+'/'+detail.productId)
      },
      // 修改表格排序条件并且重新获取数据
      changeSort(prop){
        if(prop.prop=="salesAmount"){
          this.formInline.tableName='AMOUNT';
        }
        else if(prop.prop=="price"){
          this.formInline.tableName='PRICE';
        }else{
          this.formInline.tableName='COUNT'
        }
        console.log(prop.order)
        if(prop.order==="ascending"){
          this.formInline.order='ASC';
        }else {
          this.formInline.order='DESC';
        }
        // 重置页数后重新排序
        this.currentPage=1;
        this.getSalesData()
      }
    }
  };
</script>
